<template>
  <div>
    <p> 防抖 watch 函数 1s内重复触发不会被更新 只有时间到了的最后一次更新才会触发</p>
    <input v-model="input" type="text" placeholder="Try to type anything..." />
    <p> Times Updated： {{ updated }} </p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
// https://vueuse.org/shared/debouncedWatch/
import { debouncedWatch } from '@vueuse/core';

const input = ref('');
const updated = ref(0);

// 防抖watch
debouncedWatch(
  input,
  () => {
    updated.value += 1;
  },
  { debounce: 1000 },
);
</script>

<style></style>
